<template>
	<view class="margin30 u-padding-bottom-22">
		<u-form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160"
			:validate-on-rule-change="false">
			<u-form-item label="出租类型" prop="typeName" borderBottom required>
				<u-input v-model="form.typeName" placeholder="请选择出租类型" @focus="showActionSheet" />
				<u-picker mode="selector" v-model="showType" :range="rentalTypeOptions" range-key="dictLabel"
					:safe-area-inset-bottom="true" @confirm="handleConfirmType"></u-picker>
			</u-form-item>

			<u-form-item label="居室" prop="houseNumName" borderBottom required>
				<u-input v-model="form.houseNumName" placeholder="请选择居室" @focus="showHouseNumSheet" />
				<u-picker mode="selector" v-model="showHouseNum" :range="houseNumOptions" range-key="dictLabel"
					:safe-area-inset-bottom="true" @confirm="handleConfirmHouseNum"></u-picker>
			</u-form-item>

			<u-form-item label="厅室" prop="houseHallName" borderBottom required>
				<u-input v-model="form.houseHallName" placeholder="请选择厅室" @focus="showHouseHallSheet" />
				<u-picker mode="selector" v-model="showHouseHall" :range="houseHallOptions" range-key="dictLabel"
					:safe-area-inset-bottom="true" @confirm="handleConfirmHouseHall"></u-picker>
			</u-form-item>

			<u-form-item label="卫生间" prop="toiletNumName" borderBottom required>
				<u-input v-model="form.toiletNumName" placeholder="请选择卫生间" @focus="showToiletNumSheet" />
				<u-picker mode="selector" v-model="showToiletNum" :range="toiletNumOptions" range-key="dictLabel"
					:safe-area-inset-bottom="true" @confirm="handleConfirmToiletNum"></u-picker>
			</u-form-item>

			<u-form-item label="整套面积" prop="houseArea" borderBottom required>
				<u-input v-model="form.houseArea" placeholder="请输入整套面积" type="number" />
			</u-form-item>

			<u-form-item label="房间面积" prop="roomArea" borderBottom required>
				<u-input v-model="form.roomArea" placeholder="请输入房间面积" type="number" />
			</u-form-item>
			<u-form-item label="出租房间" prop="roomTypeName" borderBottom required>
				<u-input v-model="form.roomTypeName" placeholder="请选择出租房间" @focus="showRoomTypeSheet" />
				<u-picker mode="selector" v-model="showRoomType" :range="roomTypeOptions" range-key="dictLabel"
					:safe-area-inset-bottom="true" @confirm="handleConfirmRoomType"></u-picker>
			</u-form-item>

			<u-form-item label="装修" prop="decorationName" borderBottom required>
				<u-input v-model="form.decorationName" placeholder="请选择装修" @focus="showDecorationSheet" />
				<u-picker mode="selector" v-model="showDecoration" :range="decorationOptions" range-key="dictLabel"
					:safe-area-inset-bottom="true" @confirm="handleConfirmDecoration"></u-picker>
			</u-form-item>

			<u-form-item label="租金" prop="price" borderBottom required>
				<u-input v-model="form.price" placeholder="请输入租金" type="number" />
			</u-form-item>

			<u-form-item label="起租日期" prop="startDate" borderBottom required>
				<u-input v-model="form.startDate" @click="showStartDate=true" placeholder="请选择起租日期" />
				<u-calendar v-model="showStartDate" mode="date" @change="handleCalendarChange"></u-calendar>
			</u-form-item>

			<u-form-item label="房源描述" prop="introduce" borderBottom required>
				<u-input v-model="form.introduce" placeholder="请输入房源描述" />
			</u-form-item>

			<u-form-item label="小区名称" prop="villageName" borderBottom required>
				<!-- <u-input v-model="form.villageNameName" placeholder="请选择房源小区" type="select"
					@click.native="showVillageNameSheet" />
				<u-select v-model="showVillageName" :list="villageNameOptions" @confirm="handleConfirmVillageName"></u-select> -->
				<u-input v-model="form.villageName" placeholder="请输入房源小区" />
			</u-form-item>

			<u-form-item label="房东姓名" prop="ownerName" borderBottom required>
				<u-input v-model="form.ownerName" placeholder="请输入房东姓名" />
			</u-form-item>

			<u-form-item label="房东电话" prop="owerPhone" borderBottom required>
				<u-input v-model="form.owerPhone" placeholder="请输入房东电话" type="number" />
			</u-form-item>

			<u-form-item label="房间图片" borderBottom required>
				<u-upload :action="action" :header="headers" :file-list="fileList" :show-progress="true"
					@on-success="handleUploadSuccess"></u-upload>
			</u-form-item>

			<u-button type="primary" class="margin30" @click="handleSubmit">提交</u-button>
		</u-form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getDictType,
		addRoom,
		updateRoom,
		findHouseById
	} from "@/common/api.js";
	import config from "@/common/config.js"

	export default {
		data() {
			return {
				action: config.baseUrl + "/api/oss/upload",
				fileList: [],
				allDictData: [],
				headers: {
					Authorization: "Bearer " + uni.getStorageSync("token")
				},
				houseId: undefined,
				houseDetail: {},
				showType: false,
				showHouseNum: false,
				showHouseHall: false,
				showToiletNum: false,
				showRoomType: false,
				showDecoration: false,
				showStartDate: false,
				showVillageName: false,
				//房屋类型
				rentalTypeOptions: [],
				villageNameOptions: [],
				//居室
				houseNumOptions: [],
				houseHallOptions: [],
				toiletNumOptions: [],
				roomTypeOptions: [],
				decorationOptions: [],
				stepTypeOptions: [],
				form: {
					type: undefined,
					typeName: undefined,
					houseNum: undefined,
					houseNumName: undefined,
					houseHall: undefined,
					houseHallName: undefined,
					toiletNum: undefined,
					toiletNumName: undefined,
					houseArea: undefined,
					roomArea: undefined,
					roomType: undefined,
					roomTypeName: undefined,
					decoration: undefined,
					decorationName: undefined,
					price: undefined,
					startDate: undefined,
					introduce: undefined,
					villageName: undefined,
					ownerName: undefined,
					owerPhone: undefined
				},
				rules: {
					typeName: [{
						required: true,
						message: '请选择出租类型',
						trigger: ['change'],
					}],
					houseNumName: [{
						required: true,
						message: '请选择居室',
						trigger: ['change'],
					}],
					houseHallName: [{
						required: true,
						message: '请选择厅室',
						trigger: ['change'],
					}],
					toiletNumName: [{
						required: true,
						message: '请选择卫生间',
						trigger: ['change'],
					}],
					houseArea: [{
						required: true,
						message: '请输入整套面积',
						trigger: ['change', 'blur'],
					}],
					roomArea: [{
						required: true,
						message: '请输入房间面积',
						trigger: ['change', 'blur'],
					}],
					roomTypeName: [{
						required: true,
						message: '请选择出租房间',
						trigger: ['change'],
					}],
					decorationName: [{
						required: true,
						message: '请选择装修',
						trigger: ['change'],
					}],
					price: [{
						required: true,
						message: '请输入租金',
						trigger: ['change'],
					}],
					startDate: [{
						required: true,
						message: '请选择起租日期',
						trigger: ['change', 'blur'],
					}],
					introduce: [{
						required: true,
						message: '请输入房源描述',
						trigger: ['change', 'blur'],
					}],
					villageName: [{
						required: true,
						message: '请输入房源小区',
						trigger: ['change', 'blur'],
					}],
					ownerName: [{
						required: true,
						message: '请输入房东姓名',
						trigger: ['change', 'blur'],
					}],
					owerPhone: [{
						required: true,
						message: '请输入房东电话',
						trigger: ['change', 'blur'],
					}],
				}
			};
		},
		methods: {
			handleCalendarChange(e) {
				this.form.startDate = e.result
			},
			handleConfirmType(option) {
				console.log(option, 8899)
				const index = option[0]
				this.form.type = this.rentalTypeOptions[index].dictValue
				this.form.typeName = this.rentalTypeOptions[index].dictLabel
			},
			handleConfirmHouseNum(option) {
				const index = option[0]
				this.form.houseNum = this.houseNumOptions[index].dictValue
				this.form.houseNumName = this.houseNumOptions[index].dictLabel
			},
			handleConfirmHouseHall(option) {
				const index = option[0]
				this.form.houseHall = this.houseHallOptions[index].dictValue
				this.form.houseHallName = this.houseHallOptions[index].dictLabel
			},
			handleConfirmToiletNum(option) {
				const index = option[0]
				this.form.toiletNum = this.toiletNumOptions[index].dictValue
				this.form.toiletNumName = this.toiletNumOptions[index].dictLabel
			},
			handleConfirmRoomType(option) {
				const index = option[0]
				this.form.roomType = this.roomTypeOptions[index].dictValue
				this.form.roomTypeName = this.roomTypeOptions[index].dictLabel
			},
			handleConfirmDecoration(option) {
				const index = option[0]
				this.form.decoration = this.decorationOptions[index].dictValue
				this.form.decorationName = this.decorationOptions[index].dictLabel
			},

			handleConfirmVillageName(option) {
				this.form.villageName = option[0].value
				this.form.villageNameName = option[0].label
			},

			showActionSheet() {
				this.showType = true;
				this.hideKeyboard()
			},
			showHouseNumSheet() {
				this.showHouseNum = true;
				this.hideKeyboard()
			},
			showHouseHallSheet() {
				this.showHouseHall = true;
				this.hideKeyboard()
			},
			showToiletNumSheet() {
				this.showToiletNum = true;
				this.hideKeyboard()
			},
			showRoomTypeSheet() {
				this.showRoomType = true;
				this.hideKeyboard()
			},
			showDecorationSheet() {
				this.showDecoration = true;
				this.hideKeyboard()
			},
			showVillageNameSheet() {
				this.showVillageName = true;
				this.hideKeyboard()
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			getDictType(type) {
				return getDictType({
					dictType: type
				}).then(res => res.data)
			},
			//获取房源详情
			getHouseInfo(houseId) {
				findHouseById(houseId).then(res => {
					this.form = {
						...res.data
					}

					this.form.typeName = this.getDictByType(this.form.type, this.rentalTypeOptions)
					this.form.houseNumName = this.getDictByType(this.form.houseNum, this.houseNumOptions)
					this.form.houseHallName = this.getDictByType(this.form.houseHall, this.houseHallOptions)
					this.form.toiletNumName = this.getDictByType(this.form.toiletNum, this.toiletNumOptions)
					this.form.roomTypeName = this.getDictByType(this.form.roomType, this.roomTypeOptions)
					this.form.decorationName = this.getDictByType(this.form.decoration, this.decorationOptions)

					this.fileList = this.form.imageList.map(item => {
						item.url = item.imgUrl
						return item
					})

				})
			},
			//根据字典的值查出label来
			getDictByType(type, options) {
				return options?.find(item => item.dictValue == type)?.dictLabel
			},
			handleSubmit() {
				console.log(this.fileList)
				console.log(this.form)
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.houseId) {
							//编辑
							updateRoom(this.form).then(res => {
								this.$refs.uToast.show({
									title: '发布成功',
									type: 'success',
								})
								uni.switchTab({
									url: '/pages/index/index'
								})
							})
						} else {
							//新增
							addRoom(this.form).then(res => {
								this.$refs.uToast.show({
									title: '发布成功',
									type: 'success',
								})
								uni.switchTab({
									url: '/pages/index/index'
								})
							})
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			handleUploadSuccess(res, index, lists) {
				console.log(res, index, lists, 1111)
				console.log(res, 2222)
				if (res.code === 200) {
					this.form.imageList = lists.map(item => {
						return {
							imgUrl: item.response.data.name
						}
					})
				}
				console.log('this.form.imageList=', this.form.imageList)
			},
			async initData() {
				const rentalTypeOptions = this.getDictType('rental_type')
				//居室
				const houseNumOptions = this.getDictType('bed_room')
				//装修风格
				const decorationOptions = this.getDictType('decoration_style')
				//几室几厅
				const houseHallOptions = this.getDictType('hall_number')
				//几卫
				const toiletNumOptions = this.getDictType('toilet_num')
				//房间类型
				const roomTypeOptions = this.getDictType('room_type')
				//房屋类型
				const stepTypeOptions = this.getDictType('step_type')

				Promise.all([rentalTypeOptions, houseNumOptions, decorationOptions, houseHallOptions, toiletNumOptions,
					roomTypeOptions, stepTypeOptions
				]).then(res => {
					[
						this.rentalTypeOptions,
						this.houseNumOptions,
						this.decorationOptions,
						this.houseHallOptions,
						this.toiletNumOptions,
						this.roomTypeOptions,
						this.stepTypeOptions,
					] = [...res]

					//是否是编辑
					if (this.houseId) {
						this.getHouseInfo(this.houseId)
					}
					console.log(res, 8800)
				})
			}
		},
		onLoad(options) {
			this.houseId = options.houseId
			this.initData(options.houseId)
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">

</style>